import React from 'react';
import {Table, Card, Row, Col} from 'antd';
import PropTypes from 'prop-types';
import {TABLE, COMMON_TABLE_QUERY_FAIL_TEXT, COMMON_TABLE_EMPTY_TEXT} from '../constants';
import {injectIntl} from './intl';
import moment from 'moment';
import styles from './style.css';

const month = moment(new Date()).format('M') === 1 ? 12 : moment(new Date()).format('M') - 1;
const year = moment(new Date()).format('YYYY');
// eslint-disable-next-line react/prefer-stateless-function
export class TablePanelMonth extends React.PureComponent {
    render() {
        const {
            initData,
            loading,
            hasError
        } = this.props;
        const columnsCurrent = [
            {
                title: this.props.intl.formatMessage({
                    id: 'tablePanelMonth.column.country',
                    defaultMessage: '国家'
                }),
                dataIndex: 'country'
            }, {
                title: `${year}年1-${month}月`,
                dataIndex: 'yearMonth'
            }, {
                title: `${year - 1}年1-${month}月`,
                dataIndex: 'yearMonthLast'
            }, {
                title: this.props.intl.formatMessage({
                    id: 'tablePanelMonth.column.rate',
                    defaultMessage: '同比'
                }),
                dataIndex: 'rate',
                render: text => `${text}%`
            }];
        const columnsSummary = [
            {
                title: this.props.intl.formatMessage({
                    id: 'tablePanelMonth.column.country',
                    defaultMessage: '国家'
                }),
                dataIndex: 'country'
            }, {
                title: `${year}年1月`,
                dataIndex: 'yearMonth1'
            }];
        if(month > 1)
            columnsSummary.push({
                title: `${year}年2月`,
                dataIndex: 'yearMonth2'
            });
        if(month > 2)
            columnsSummary.push({
                title: `${year}年3月`,
                dataIndex: 'yearMonth3'
            });
        if(month > 3)
            columnsSummary.push({
                title: `${year}年4月`,
                dataIndex: 'yearMonth4'
            });
        if(month > 4)
            columnsSummary.push({
                title: `${year}年5月`,
                dataIndex: 'yearMonth5'
            });
        if(month > 5)
            columnsSummary.push({
                title: `${year}年6月`,
                dataIndex: 'yearMonth6'
            });
        if(month > 6)
            columnsSummary.push({
                title: `${year}年7月`,
                dataIndex: 'yearMonth7'
            });
        if(month > 7)
            columnsSummary.push({
                title: `${year}年8月`,
                dataIndex: 'yearMonth8'
            });
        if(month > 8)
            columnsSummary.push({
                title: `${year}年9月`,
                dataIndex: 'yearMonth9'
            });
        if(month > 9)
            columnsSummary.push({
                title: `${year}年10月`,
                dataIndex: 'yearMonth10'
            });
        if(month > 10)
            columnsSummary.push({
                title: `${year}年11月`,
                dataIndex: 'yearMonth11'
            });
        if(month > 11)
            columnsSummary.push({
                title: `${year}年12月`,
                dataIndex: 'yearMonth12'
            });
        
        const columnsMonth = [
            {
                title: this.props.intl.formatMessage({
                    id: 'tablePanelMonth.column.country',
                    defaultMessage: '国家'
                }),
                dataIndex: 'country'
            }, {
                title: `${year}年${month}月`,
                dataIndex: 'yearMonth'
            }, {
                title: `${year - 1}年${month}月`,
                dataIndex: 'yearMonthLast'
            }, {
                title: this.props.intl.formatMessage({
                    id: 'tablePanelMonth.column.rate',
                    defaultMessage: '同比'
                }),
                dataIndex: 'rate',
                render: text => `${text}%`
            }];
        return (
            <div>
                <Card.Meta
                    title={<Row>
                        <Col>
                            {this.props.intl.formatMessage({
                                id: 'tablePanelMonth.column.currentSummary',
                                defaultMessage: '截止当月汇总(万/美元)'
                            })}
                        </Col>
                    </Row>}
                    description={<div>
                        <Table
                            className="white-space-nowrap"
                            rowKey="id"
                            dataSource={initData.currentSummary}
                            columns={columnsCurrent}
                            loading={loading}
                            pagination={false}
                            {...TABLE}
                            locale={{
                                emptyText: hasError ? COMMON_TABLE_QUERY_FAIL_TEXT : COMMON_TABLE_EMPTY_TEXT
                            }} />
                    </div>}/>
                <div className={styles.divHeight} />
                <Card.Meta
                    title={<Row>
                        <Col>
                            {this.props.intl.formatMessage({
                                id: 'tablePanelMonth.column.summaryDetails',
                                defaultMessage: '汇总明细(万/美元)'
                            })}
                        </Col>
                    </Row>}
                    description={<div>
                        <Table
                            className="white-space-nowrap"
                            rowKey="id"
                            dataSource={initData.summaryDetails}
                            columns={columnsSummary}
                            loading={loading}
                            pagination={false}
                            {...TABLE}
                            locale={{
                                emptyText: hasError ? COMMON_TABLE_QUERY_FAIL_TEXT : COMMON_TABLE_EMPTY_TEXT
                            }} />
                    </div>}/>
                <div className={styles.divHeight} />
                <Card.Meta
                    title={<Row>
                        <Col>
                            {this.props.intl.formatMessage({
                                id: 'tablePanelMonth.column.monthDetails',
                                defaultMessage: '当月汇总(万/美元)'
                            })}
                        </Col>
                    </Row>}
                    description={<div>
                        <Table
                            className="white-space-nowrap"
                            rowKey="id"
                            dataSource={initData.monthDetails}
                            columns={columnsMonth}
                            loading={loading}
                            pagination={false}
                            {...TABLE}
                            locale={{
                                emptyText: hasError ? COMMON_TABLE_QUERY_FAIL_TEXT : COMMON_TABLE_EMPTY_TEXT
                            }} />
                    </div>}/>
            </div>
        );
    }
}

TablePanelMonth.propTypes = {
    initData: PropTypes.object.isRequired,
    hasError: PropTypes.string,
    intl: PropTypes.object,
    loading: PropTypes.bool,
};

import {connect} from 'react-redux';
import {createSelector} from 'reselect';

const getInitData = createSelector(
    state => state.getIn(['page', 'domainData', 'initData']),
    init => {
        const initData = init.toJS();
        const currentSummary = initData ? initData.currentSummary : [];
        const summaryDetails = initData ? initData.summaryDetails : [];
        const monthDetails = initData ? initData.monthDetails : [];
        return {
            currentSummary,
            summaryDetails,
            monthDetails
        };
    }
);
const mapStateToProps = state => ({
    loading: state.getIn(['page', 'domainData', 'initData', 'isFetching']),
    initData: getInitData(state),
});
export default connect(mapStateToProps, null)(injectIntl(TablePanelMonth));

